var xAxisArray1 = JSON.parse(sessionStorage.getItem("xAxisArray"))
console.log(xAxisArray1)
// 已删除
var scArray = JSON.parse(sessionStorage.getItem("fJsArray1"))

// 已上架
var sjArray = JSON.parse(sessionStorage.getItem("jsArray1"))

// 已下架
var xjArray = JSON.parse(sessionStorage.getItem("jfArray1"))

var scNum = 0;
var sjNum = 0;
var xjNum = 0;

$.each(scArray,function (i,val){
    scNum += val;
})
$.each(sjArray,function (i,val){
    sjNum += val;
})
$.each(xjArray,function (i,val){
    xjNum += val;
})

//第一个统计模块
var dom = document.getElementById('wire');
var myChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false
});
var app = {};
var option;
option = {
    title: {
        text: 'Weekly Info'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['已删除', '已上架', '已下架']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xAxisArray1
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '已删除',
            type: 'line',
            stack: 'Total',
            data: scArray
        },
        {
            name: '已上架',
            type: 'line',
            stack: 'Total',
            data: sjArray
        },
        {
            name: '已下架',
            type: 'line',
            stack: 'Total',
            data: xjArray
        },
    ]
};

if (option && typeof option === 'object') {
    myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);

//第二个统计模块
var chartDom2 = document.getElementById('cake');
var myChart2 = echarts.init(chartDom2);
// var myChart2 = echarts.init(chartDom2, 'dark');
var option2;

option2 = {
    title: {
        text: 'Weekly Info',
        subtext: 'Cookie Data',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    series: [
        {
            name: 'Week用户统计',
            type: 'pie',
            radius: '50%',
            data: [
                { value: scNum , name: '已删除' },
                { value: sjNum , name: '已上架' },
                { value: xjNum , name: '已下架' }
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
option2 && myChart2.setOption(option2);

//第三个统计模块
var chartDom3 = document.getElementById('column');
var myChart3 = echarts.init(chartDom3);
var option3;

option3 = {
    xAxis: {
        data: ['已删除', '已上架', '已下架']
    },
    yAxis: {},
    dataGroupId: '',
    animationDurationUpdate: 500,
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    series: {
        type: 'bar',
        id: 'sales',
        data: [
            {
                value: scNum,
                groupId: '已删除',
                itemStyle: {
                    color: '#00C9A7'
                }
            },
            {
                value: sjNum,
                groupId: '已上架'
            },
            {
                value: xjNum,
                groupId: '已下架',
                itemStyle: {
                    color: '#a90000'
                }
            },
        ],
        universalTransition: {
            enabled: true,
            divideShape: 'clone'
        }
    }
};

const drilldownData = [
    {
        dataGroupId: '已删除',
        data: [
            [xAxisArray1[0],{
                value: scArray[0],
                itemStyle: {
                    color: '#00C9A7'
                }
            }],
            [xAxisArray1[1],{
                value: scArray[1],
                itemStyle: {
                    color: '#00C9A7'
                }
            }],
            [xAxisArray1[2],{
                value: scArray[2],
                itemStyle: {
                    color: '#00C9A7'
                }
            }],
            [xAxisArray1[3],{
                value: scArray[3],
                itemStyle: {
                    color: '#00C9A7'
                }
            }],
            [xAxisArray1[4],{
                value: scArray[4],
                itemStyle: {
                    color: '#00C9A7'
                }
            }],
            [xAxisArray1[5],{
                value: scArray[5],
                itemStyle: {
                    color: '#00C9A7'
                }
            }],
            [xAxisArray1[6],{
                value: scArray[6],
                itemStyle: {
                    color: '#00C9A7'
                }
            }]
        ]
    },
    {
        dataGroupId: '已上架',
        data: [
            [xAxisArray1[0],sjArray[0]],
            [xAxisArray1[1],sjArray[1]],
            [xAxisArray1[2],sjArray[2]],
            [xAxisArray1[3],sjArray[3]],
            [xAxisArray1[4],sjArray[4]],
            [xAxisArray1[5],sjArray[5]],
            [xAxisArray1[6],sjArray[6]]
        ]
    },
    {
        dataGroupId: '已下架',
        data: [
            [xAxisArray1[0],{
                value: xjArray[0],
                itemStyle: {
                    color: '#a90000'
                }
            }],
            [xAxisArray1[1],{
                value: xjArray[1],
                itemStyle: {
                    color: '#a90000'
                }
            }],
            [xAxisArray1[2],{
                value: xjArray[2],
                itemStyle: {
                    color: '#a90000'
                }
            }],
            [xAxisArray1[3],{
                value: xjArray[3],
                itemStyle: {
                    color: '#a90000'
                }
            }],
            [xAxisArray1[4],{
                value: xjArray[4],
                itemStyle: {
                    color: '#a90000'
                }
            }],
            [xAxisArray1[5],{
                value: xjArray[5],
                itemStyle: {
                    color: '#a90000'
                }
            }],
            [xAxisArray1[6],{
                value: xjArray[6],
                itemStyle: {
                    color: '#a90000'
                }
            }]
        ]
    }
];

myChart3.on('click', function (event) {
    if (event.data) {
        var subData = drilldownData.find(function (data) {
            return data.dataGroupId === event.data.groupId;
        });
        if (!subData) {
            return;
        }
        myChart3.setOption({
            xAxis: {
                data: subData.data.map(function (item) {
                    return item[0];
                })
            },
            series: {
                type: 'bar',
                id: 'sales',
                dataGroupId: subData.dataGroupId,
                data: subData.data.map(function (item) {
                    return item[1];
                }),
                universalTransition: {
                    enabled: true,
                    divideShape: 'clone'
                }
            },
            graphic: [
                {
                    type: 'text',
                    left: 50,
                    top: 20,
                    style: {
                        text: '返回',
                        fontSize: 18
                    },
                    onclick: function () {
                        myChart3.setOption(option3);
                    }
                }
            ]
        });
    }
});
option3 && myChart3.setOption(option3);

//进行切换模块
var wire = $("#wire")
var cake = $("#cake")
var column =$("#column")
cake.hide();
column.hide();
function changState(state){
    if (state == 0){
        wire.hide()
        column.hide()
        cake.show()
        $(window).trigger('resize');
    }else if (state == 1){
        cake.hide()
        column.hide()
        wire.show()
        $(window).trigger('resize');
    }else if (state == 2){
        cake.hide()
        wire.hide()
        column.show()
        $(window).trigger('resize');
    }
}